import React from 'react';
import request from '../request';
import { Table, Image, Statistic, Dropdown, Menu, Button, message, Modal, Tag } from 'antd';
import { DownOutlined } from '@ant-design/icons';

function BookList(props) {

    const {
        list,
        total,
        loading,
        current,
        pageSize,
        setCurBook,
        setBookList,
        getBookList,
        setOpenDrawer,
        onPaginationChange,
    } = props;

    const handleDelBook = (id, record) => {
        Modal.confirm({
            title: '你确定要删除该条数据？',
            content: record.bookName,
            onOk: () => {
                request.get('/api/book', {
                    params: { id }
                }).then(() => {
                    message.success('删除成功');
                    if (list.length === 1) {
                        if (current === 1) {
                            setBookList([]);
                        } else {
                            getBookList(current - 1);
                        }
                    } else {
                        getBookList(current);
                    }
                });
            }
        });
    };

    const handleOpenUpdateModal = (record) => {
        setCurBook(record);
        setOpenDrawer(true);
    };

    const columns = [
        { title: '图书名', dataIndex: 'bookName', key: 'bookName' },
        { title: '描述', dataIndex: 'desc', key: 'desc' },
        { title: '图片', dataIndex: 'url', key: 'url', render: (url) => (
            <Image src={url} width={60} />
        )},
        { title: '价格', dataIndex: 'price', key: 'price', render: (price) => (
            <Statistic value={price} prefix="¥" precision={2} valueStyle={{ color: '#3f8600' }} />
        )},
        { title: '标签', dataIndex: 'category', key: 'category', render: (category) => (
            <Tag color="blue">{category.join('|')}</Tag>
        )},
        { title: '操作', dataIndex: '_id', key: '_id', render: (id, record) => (
            <Dropdown overlay={(
                <Menu>
                    <Menu.Item key="1">
                        <Button type="primary" onClick={() => handleOpenUpdateModal(record)}>更新</Button>
                    </Menu.Item>
                    <Menu.Item key="2">
                        <Button danger type="primary" onClick={() => handleDelBook(id, record)}>删除</Button>
                    </Menu.Item>
                </Menu>
            )} trigger={['click']}>
                <Button>
                    操作 <DownOutlined />
                </Button>
            </Dropdown>
        )}
    ];

    return (
        <Table
            loading={loading}
            dataSource={list}
            columns={columns}
            rowKey="_id"
            pagination={{
                total,
                current,
                pageSize,
                defaultCurrent: 1,
                defaultPageSize: 10,
                onChange: onPaginationChange,
            }}
        />
    );
}

export default BookList;
